import React, { Component, createRef } from 'react'

export default class App extends Component {
  constructor() {
    super()
    // 走一次
    console.log('#1 constructor')
    // 初始化 state
    this.state = {
      name: '尼古拉斯',
    }
    // 初始化 ref 引用
    this.inputRef = createRef() // 和 #1 等价
  }
  handleClick = () => {
    // console.log(this.inputRef.current.value)
    // 每次 setState 都会重新执行 render 去渲染
    this.setState({ name: Math.random() })
  }
  // inputRef = createRef() // #1
  render() {
    // 每次渲染都会走，专门用来渲染 UI
    // !注意点，render 里面不能直接调用 setState
    // this.setState({ name: Math.random() })
    console.log('#2 render')
    return (
      <div>
        <input type='text' ref={this.inputRef} />
        <button onClick={this.handleClick}>点击</button>
        {/* 下面不叫直接调用，而是点击的时候才调用的 */}
        <button onClick={() => this.setState({ name: Math.random() })}>
          点击
        </button>
      </div>
    )
  }
  componentDidMount() {
    // 初始渲染完毕走一次
    // 发请求、获取渲染完毕后的 DOM
    console.log('#3 componentDidMount')
  }
}
